<template>
  <div id="fullpage">
    <!-- 封面 -->
    <div class="section active" id="section0">
      <div
        v-if="loading"
        class="u-absolute u-flex u-col-center u-row-center"
        style="top:0;width:100vw;height:100vh;max-width: 750px;"
      >
        <van-loading size="24px" vertical class="u-type-primary-light">加载中...</van-loading>
      </div>
      <template v-else>
        <div>
          <h1 v-animate="{ name: 'zoomInDown', delay: 500 }" class="u-type-primary-light">2021刀塔年报</h1>
          <van-image
            v-animate="{ name: 'rotateIn', delay: 1500 }"
            round
            width="4rem"
            height="4rem"
            :src="userAvatar"
            fit="cover"
          >
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
          <div
            class="u-type-primary-light u-m-t-20"
            v-animate="{ name: 'zoomInDown', delay: 2000 }"
          >
            <span class="u-m-r-4">我是</span>
            <span class="u-font-20 u-font-bold">{{ userName }}</span>
          </div>
        </div>
        <van-button
          style="width:160px;margin-top: 100px;"
          v-animate="{ name: 'fadeIn', delay: 3000 }"
          round
          type="danger"
          @click="handleToNext"
        >开启</van-button>
        <div style="position: absolute; bottom: 0px; z-index: 0; opacity: 1;">
          <img src="http://cdn.max-c.com/image/radiant-ground.png" style="width:100%;" />
        </div>
      </template>
    </div>
    <!-- 游戏场数总结 -->
    <div class="section" id="section1">
      <div v-if="active[1]" class="u-type-primary-light">
        <div class="u-type-primary-light">
          <p class="u-m-b-20" v-animate="{ name: 'fadeInDown', delay: 500 }">
            <span>2021年你在</span>
            <span class="u-font-32 u-font-bold u-m-r-4 u-m-l-4 u-type-error">刀塔</span>
            <span>世界中</span>
          </p>
          <div class="u-m-b-20" v-animate="{ name: 'fadeInDown', delay: 1000 }">
            <span>度过了</span>
            <span class="u-font-32 u-font-bold u-m-r-4 u-m-l-4 u-type-error">{{ dayTotal }}</span>
            <span>天</span>
          </div>
          <div class="u-m-b-20" v-animate="{ name: 'fadeInDown', delay: 1500 }">
            <span>进行了</span>
            <span class="u-font-32 u-font-bold u-m-r-4 u-m-l-4 u-type-error">{{ hourTotal }}</span>
            <span>小时比赛</span>
          </div>
          <div class="u-m-b-20" v-animate="{ name: 'fadeInDown', delay: 2000 }">
            <span>平均每天</span>
            <span
              class="u-font-32 u-font-bold u-m-r-4 u-m-l-4 u-type-error"
            >{{ dayTotal > 0 ? (hourTotal / dayTotal).toFixed(1) : 0 }}</span>
            <span>小时</span>
          </div>
          <div class="u-m-b-20" v-animate="{ name: 'fadeInDown', delay: 3000 }">
            <span>你是一名</span>
            <span
              class="u-font-32 u-font-bold u-m-l-4 u-type-error"
            >{{ getDayResult(dayTotal, hourTotal) }}</span>
          </div>
          <div class="u-m-b-20" v-animate="{ name: 'fadeInDown', delay: 3500 }">
            <span>2021年你进行了</span>
            <span class="u-font-32 u-font-bold u-m-l-4 u-m-r-4 u-type-error">{{ allGameTotal }}</span>
            <span>场比赛</span>
          </div>
          <div
            v-if="ladderGamesTotal > 0"
            class="u-m-b-20"
            v-animate="{ name: 'fadeInDown', delay: 4000 }"
          >
            <span>其中天梯比赛</span>
            <span class="u-font-32 u-font-bold u-m-l-4 u-m-r-4 u-type-error">{{ ladderGamesTotal }}</span>
            <span>场</span>
          </div>
          <div
            v-if="singleLadderGamesTotal > 0"
            class="u-m-b-20"
            v-animate="{ name: 'fadeInDown', delay: 4500 }"
          >
            <span>单排</span>
            <span
              class="u-font-32 u-font-bold u-m-l-4 u-m-r-4 u-type-error"
            >{{ singleLadderGamesTotal }}</span>
            <span>场</span>
            <span>，胜率</span>
            <span
              class="u-font-32 u-font-bold u-m-l-4 u-m-r-4 u-type-error"
            >{{ (singleLadderGamesWins / singleLadderGamesTotal * 100).toFixed(1) }}%</span>
          </div>
          <div
            v-if="partyLadderGamesTotal > 0"
            class="u-m-b-20"
            v-animate="{ name: 'fadeInDown', delay: 5000 }"
          >
            <span>组排</span>
            <span
              class="u-font-32 u-font-bold u-m-l-4 u-m-r-4 u-type-error"
            >{{ partyLadderGamesTotal }}</span>
            <span>场</span>
            <span>，胜率</span>
            <span
              class="u-font-32 u-font-bold u-m-l-4 u-m-r-4 u-type-error"
            >{{ (partyLadderGamesWins / partyLadderGamesTotal * 100).toFixed(1) }}%</span>
          </div>
          <div
            v-if="ladderGamesTotal > 0"
            class="u-m-b-20"
            v-animate="{ name: 'fadeInDown', delay: 5500 }"
          >
            <span>你的天梯分</span>
          </div>
          <div v-animate="{ name: 'jackInTheBox', delay: 6000 }">
            <span class="u-font-36 u-font-bold u-m-l-4 u-m-r-4 u-type-error">{{ ladderScore }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 英雄统计  -->
    <div class="section" id="section2">
      <div v-if="active[2]" class="u-type-primary-light">
        <div class="u-type-primary-light">
          <p class="u-m-b-20" v-animate="{ name: 'fadeInDown', delay: 500 }">
            <span>2021年你一共使用过</span>
            <span class="u-font-32 u-font-bold u-m-r-4 u-m-l-4 u-type-error">{{ heroTotal }}</span>
            <span>名英雄</span>
          </p>
          <div class="u-m-b-20" v-animate="{ name: 'fadeInDown', delay: 1000 }">
            <span>你最爱使用</span>
            <van-image round width="2rem" height="2rem" :src="heroAvatarMaxCount" fit="cover">
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>
            <span class="u-font-32 u-font-bold u-m-r-4 u-m-l-4 u-type-error">{{ heroNameMaxCount }}</span>
          </div>
          <div class="u-m-b-20" v-animate="{ name: 'fadeInDown', delay: 1500 }">
            <span>一共使用过</span>
            <span class="u-font-32 u-font-bold u-m-r-4 u-m-l-4 u-type-error">{{ heroMaxCount }}</span>
            <span>次,</span>
            <span>胜率</span>
            <span
              class="u-font-32 u-font-bold u-m-r-4 u-m-l-4 u-type-error"
            >{{ (heroWinsMaxCount / heroMaxCount * 100).toFixed(1) }}%</span>
          </div>
          <div class="u-m-b-20" v-animate="{ name: 'fadeInDown', delay: 2000 }">
            <span>你是一名</span>
            <span
              class="u-font-32 u-font-bold u-m-r-4 u-m-l-4 u-type-error"
            >{{ heroTotal > 80 ? '绝活海玩家' : '英雄勺玩家' }}</span>
          </div>
          <div class="u-m-b-20" v-animate="{ name: 'fadeInDown', delay: 2500 }">
            <span>你最常去</span>
            <span class="u-font-32 u-font-bold u-m-r-4 u-m-l-4 u-type-error">{{ maxRole }}</span>
            <span>胜率</span>
            <span
              class="u-font-32 u-font-bold u-m-r-4 u-m-l-4 u-type-error"
            >{{ maxRoleCount > 0 ? (maxRoleWinsCount / maxRoleCount * 100).toFixed(1) : 0 }}%</span>
          </div>
          <div class="u-m-b-20" v-animate="{ name: 'fadeInDown', delay: 3000 }">
            <span>你在天辉的胜率</span>
            <span
              class="u-font-32 u-font-bold u-m-r-4 u-m-l-4 u-type-error"
            >{{ (isRadiantWin / isRadiantCount * 100).toFixed(1) }}%</span>
          </div>
          <div class="u-m-b-20" v-animate="{ name: 'fadeInDown', delay: 3500 }">
            <span>你在夜魇的胜率</span>
            <span
              class="u-font-32 u-font-bold u-m-r-4 u-m-l-4 u-type-error"
            >{{ (notRadiantWin / notRadiantCount * 100).toFixed(1) }}%</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 记录统计 -->
    <div class="section" id="section3">
      <div v-if="active[3]" class="u-type-primary-light">
        <div class="u-type-primary-light">
          <div class="u-m-b-20" v-animate="{ name: 'fadeInDown', delay: 500 }">
            <h1>数据统计</h1>
          </div>
          <div class="u-m-b-20" v-animate="{ name: 'fadeInDown', delay: 1000 }">
            <span>击杀</span>
            <span class="u-font-32 u-font-bold u-m-r-4 u-m-l-4 u-type-error">{{ totals.kills }}</span>
            <span>死亡</span>
            <span class="u-font-32 u-font-bold u-m-r-4 u-m-l-4 u-type-error">{{ totals.deaths }}</span>
            <span>助攻</span>
            <span class="u-font-32 u-font-bold u-m-r-4 u-m-l-4 u-type-error">{{ totals.assists }}</span>
          </div>
          <div class="u-m-b-20" v-animate="{ name: 'fadeInDown', delay: 1500 }">
            <span>正补</span>
            <span class="u-font-32 u-font-bold u-m-r-4 u-m-l-4 u-type-error">{{ totals.last_hits }}</span>
            <span>反补</span>
            <span class="u-font-32 u-font-bold u-m-r-4 u-m-l-4 u-type-error">{{ totals.denies }}</span>
          </div>
          <div class="u-m-b-20" v-animate="{ name: 'fadeInDown', delay: 2000 }">
            <span>摧毁防御塔</span>
            <span
              class="u-font-32 u-font-bold u-m-r-4 u-m-l-4 u-type-error"
            >{{ totals.tower_kills }}</span>
            <span>座</span>
          </div>
          <div class="u-m-b-20" v-animate="{ name: 'fadeInDown', delay: 2500 }">
            <span>击杀野怪</span>
            <span
              class="u-font-32 u-font-bold u-m-r-4 u-m-l-4 u-type-error"
            >{{ totals.neutral_kills }}</span>
            <span>只</span>
          </div>
          <div class="u-m-b-20" v-animate="{ name: 'fadeInDown', delay: 3000 }">
            <span>击杀信使</span>
            <span
              class="u-font-32 u-font-bold u-m-r-4 u-m-l-4 u-type-error"
            >{{ totals.courier_kills }}</span>
            <span>只</span>
          </div>
          <div class="u-m-b-20" v-animate="{ name: 'fadeInDown', delay: 3500 }">
            <span>购买TP</span>
            <span
              class="u-font-32 u-font-bold u-m-r-4 u-m-l-4 u-type-error"
            >{{ totals.purchase_tpscroll }}</span>
            <span>次</span>
          </div>
          <div class="u-m-b-20" v-animate="{ name: 'fadeInDown', delay: 4000 }">
            <span>购买假眼</span>
            <span
              class="u-font-32 u-font-bold u-m-r-4 u-m-l-4 u-type-error"
            >{{ totals.purchase_ward_observer }}</span>
            <span>购买真眼</span>
            <span
              class="u-font-32 u-font-bold u-m-r-4 u-m-l-4 u-type-error"
            >{{ totals.purchase_ward_sentry }}</span>
          </div>
          <div class="u-m-b-20" v-animate="{ name: 'fadeInDown', delay: 4500 }">
            <span>发出小地图信号</span>
            <span class="u-font-32 u-font-bold u-m-r-4 u-m-l-4 u-type-error">{{ totals.pings }}</span>
            <span>次</span>
          </div>
          <div class="u-m-b-20" v-animate="{ name: 'fadeInDown', delay: 5000 }">
            <span>购买圣剑</span>
            <span
              class="u-font-32 u-font-bold u-m-r-4 u-m-l-4 u-type-error"
            >{{ totals.purchase_rapier }}</span>
            <span>次</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 玩家统计 -->
    <div class="section" id="section4">
      <div v-if="active[4]" class="u-type-primary-light">
        <div class="u-type-primary-light">
          <div class="u-m-b-20" v-animate="{ name: 'fadeInDown', delay: 500 }">
            <h1>队友统计</h1>
          </div>
          <van-row class="u-m-b-4" v-animate="{ name: 'fadeInDown', delay: 1000 }">
            <van-col span="4">排名</van-col>
            <van-col span="12">昵称</van-col>
            <van-col span="3">场数</van-col>
            <van-col span="3">胜率</van-col>
          </van-row>
          <div>
            <van-row
              v-animate="{ name: 'fadeInDown', delay: 1500 + (index * 500) }"
              v-for="(item, index) in peersList"
              :key="item.account_id"
              class="u-line-1 u-m-b-20 u-m-r-16 u-m-l-16"
              type="flex"
              justify="space-around"
              align="center"
            >
              <van-col class="u-text-left" span="2">
                <van-tag type="primary">{{ index + 1 }}</van-tag>
              </van-col>
              <van-col span="4">
                <van-image round height="28" width="28" fit="cover" :src="item.avatarfull"></van-image>
              </van-col>
              <van-col class="u-text-left u-line-1" span="10">
                {{
                  item.personaname
                }}
              </van-col>
              <van-col span="4">{{ item.games }}</van-col>
              <van-col span="4">{{ (item.with_win / item.games * 100).toFixed(2) }}%</van-col>
            </van-row>
          </div>
        </div>
      </div>
    </div>
    <!-- 总结 -->
    <div class="section" id="section5">
      <div
        class="u-font-32 u-font-bold u-m-r-4 u-m-l-4 u-type-primary-light"
        v-animate="{ name: 'heartBeat', duration: 2000, infinite: true }"
      >祝你2022年上大分</div>
    </div>
  </div>
</template>
<script setup>
import { onUnmounted, onMounted, ref, computed, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getPlayerMatches, getPlayers, getPlayerCounts, getPlayerTotals, getPlayerPeers } from '@/api/player'
import { isWin, isLadder, getHeroName, getHeroAvatar } from '@/utils/dotaHelper'
import fullpage from "fullpage.js";
const route = useRoute()
const router = useRouter()
const active = ref({
  0: true,
});
const userName = ref('匿名玩家')
const userAvatar = ref('')
const loading = ref(true);
let _fullPage;

const dayTotal = ref(0) // 游戏总天数
const hourTotal = ref(0) // 游戏总时间
const heroTotal = ref(0) // 英雄使用总是
const allGameTotal = ref(0) // 所有游戏总数
const ladderGamesTotal = ref(0) //天梯总数
const singleLadderGamesTotal = ref(0) // 天梯单排数量
const singleLadderGamesWins = ref(0) // 天梯单排赢
const partyLadderGamesTotal = ref(0) // 天梯组排数量
const partyLadderGamesWins = ref(0) // 天梯组排赢
const ladderScore = computed(() => { // 天梯分变化
  return ((singleLadderGamesWins.value * 2 - singleLadderGamesTotal.value) * 30) + ((partyLadderGamesWins.value * 2 - partyLadderGamesTotal.value) * 20)
})

const heroMaxCount = ref(0) // 使用最多英雄次数
const heroWinsMaxCount = ref(0) // 使用最多英雄赢次数
const heroNameMaxCount = ref('') // 使用最多英雄名字
const heroAvatarMaxCount = ref('') // 使用最多英雄头像
const maxRole = ref('未知') // 最常去的线路
const maxRoleWinsCount = ref(0)
const maxRoleCount = ref(0)

const isRadiantWin = ref(0)
const isRadiantCount = ref(0)
const notRadiantWin = ref(0)
const notRadiantCount = ref(0)

const getDayResult = (dayTotal, hourTotal) => {
  if (!hourTotal) return '云玩家'
  const dayPerHour = Math.round(hourTotal / dayTotal)
  if (dayPerHour > 0 && dayPerHour < 1) {
    return '佛系玩家'
  } else if (dayPerHour >= 1 && dayPerHour <= 3) {
    return '酬勤玩家'
  } else {
    return '狂热玩家'
  }
}

const totals = reactive({
  kills: 0
})

const peersList = ref([])

onMounted(() => {
  _fullPage = new fullpage("#fullpage", {
    licenseKey: null,
    onLeave: function (origin, destination) {
      active.value[destination.index] = true;
    },
  });
  loading.value = true
  Promise.all([getPlayers(route.params.account_id),
  getPlayerMatches(route.params.account_id, { date: 365 }),
  getPlayerCounts(route.params.account_id, { date: 365 }),
  getPlayerTotals(route.params.account_id, { date: 365 }),
  getPlayerPeers(route.params.account_id, { date: 365 })
  ]).then(resList => {
    const userInfo = resList[0]
    userName.value = userInfo.profile.personaname
    userAvatar.value = userInfo.profile.avatarfull
    const matches = resList[1]
    let durationTotal = 0
    let yearGameMap = {}
    let heroMap = {}
    allGameTotal.value = matches.length
    matches.forEach(match => {
      durationTotal += match.duration
      if (yearGameMap[new Date(match.start_time * 1000).toLocaleDateString()]) {
        yearGameMap[new Date(match.start_time * 1000).toLocaleDateString()].gameTotal++
        isWin(match.player_slot, match.radiant_win) ? yearGameMap[new Date(match.start_time * 1000).toLocaleDateString()].winTotal++ : yearGameMap[new Date(match.start_time * 1000).toLocaleDateString()].loseTotal++
      } else {
        yearGameMap[new Date(match.start_time * 1000).toLocaleDateString()] = {
          gameTotal: 1,
          winTotal: isWin(match.player_slot, match.radiant_win) ? 1 : 0,
          loseTotal: isWin(match.player_slot, match.radiant_win) ? 0 : 1
        }
      }
      if (heroMap[match.hero_id]) {
        heroMap[match.hero_id].total++
        isWin(match.player_slot, match.radiant_win) ? heroMap[match.hero_id].winTotal++ : heroMap[match.hero_id].loseTotal++
      } else {
        heroMap[match.hero_id] = {
          total: 1,
          winTotal: isWin(match.player_slot, match.radiant_win) ? 1 : 0,
          loseTotal: isWin(match.player_slot, match.radiant_win) ? 0 : 1
        }
      }
      if (isLadder(match.lobby_type)) {
        ladderGamesTotal.value++
        if (match.party_size > 1) {
          partyLadderGamesTotal.value++
          isWin(match.player_slot, match.radiant_win) ? partyLadderGamesWins.value++ : ''
        } else {
          singleLadderGamesTotal.value++
          isWin(match.player_slot, match.radiant_win) ? singleLadderGamesWins.value++ : ''
        }
      }
    });
    dayTotal.value = Object.keys(yearGameMap).length
    hourTotal.value = Math.ceil(durationTotal / 3600)
    heroTotal.value = Object.keys(heroMap).length

    let heroIdMaxCount = 0
    for (let i in heroMap) {
      if (heroMap[i].total > heroMaxCount.value) {
        heroMaxCount.value = heroMap[i].total
        heroIdMaxCount = i
      }
    }
    heroNameMaxCount.value = getHeroName(heroIdMaxCount)
    heroAvatarMaxCount.value = getHeroAvatar(heroIdMaxCount)
    heroWinsMaxCount.value = heroMap[heroIdMaxCount].winTotal
    const counts = resList[2]
    let _maxRoleCount = 0
    let maxRoleId = 0
    const ROLE_MAP = {
      0: '未知',
      1: '优势路',
      2: '中路',
      3: '劣势路',
      4: '打野'
    }
    for (let i in counts.lane_role) {
      if (counts.lane_role[i].games > _maxRoleCount) {
        _maxRoleCount = counts.lane_role[i].games
        maxRoleId = i
      }
    }
    maxRole.value = ROLE_MAP[maxRoleId]
    maxRoleWinsCount.value = counts.lane_role[maxRoleId].win
    maxRoleCount.value = counts.lane_role[maxRoleId].games
    isRadiantCount.value = counts.is_radiant[0].games
    isRadiantWin.value = counts.is_radiant[0].win
    notRadiantCount.value = counts.is_radiant[1].games
    notRadiantWin.value = counts.is_radiant[1].win

    resList[3].forEach(item => {
      totals[item.field] = item.sum
    })
    peersList.value = resList[4].length > 10 ? resList[4].slice(0, 10) : resList[4]
    loading.value = false
  }).catch((e) => {
    console.log(e)
    router.push({
      name: '404'
    })
    loading.value = false;
  });
});
onUnmounted(() => {
  _fullPage.destroy("all");
});
const handleToNext = () => {
  _fullPage.moveSectionDown();
};
</script>
<style lang="scss" scoped>
#fullpage {
  max-width: 750px;
  margin: 0px auto;
}
#section0 {
  background: url(http://cdn.maxjia.com/image/b1_new.jpg) no-repeat 100% 100%;
  background-color: rgb(25, 25, 25);
  background-size: cover;
}
#section1,
#section2,
#section3,
#section4,
#section5 {
  background: url(http://cdn.maxjia.com/image/hero/bj_new.png) no-repeat 100%
    100%;
  background-color: rgb(25, 25, 25);
  background-size: cover;
}
</style>
